<!-- 购物车 -->
<template>
    <div id="spcart">
        <div class="address">
            <div class="address1"><i class="fa fa-compass"></i> 弓箭坊40号（当前位置）</div>
        </div>
        <div class="shop" v-for="spcacrt in spcarts" :key="'sp_'+spcacrt.id">
            <div class="title" >
                <span>{{spcacrt.shopTitle}}</span>  
                <i class="fa fa-angle-right"></i> 
            </div>
            <div class="merchant">
                <ul >
                    <li v-for="spcacrt in spcarts" :key="'sp1_'+spcacrt.id">
                        <img :src="apiUrl+'/'+spcacrt.mersImg" alt="">
                        <p>{{spcacrt.mersprice}}</p>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部购物车 -->
        <bnav active="spcart"></bnav>
    </div>
</template>
<script>
import bnav from '@/components/Bnav.vue';
export default {
    components:{
        bnav,
    },
    data(){
        return{
            spcarts:[]
        }
    },
    created(){
        this.getSpcart();
    },
    methods:{
        getSpcart() {
      this.axios.get("/spcart/list").then(res => {
        if (res.data.error == 0) {
          this.spcarts = res.data.data0;
          console.log(res.data.data0);
        }
      });
    },
    }
}
</script>
<style>

ul{
    list-style-type: none;
}
#spacrt{
    width:100%;
    height: auto;
    background-color: #5a5353;
}
#spcart .address{
    width:70%;
    height: 2rem;
    margin:0.5rem auto;
    border:1px solid #f4f4f4;
    border-radius: 1rem;
}
 #spcart .address1{
    width:94%;
    height: 1.4rem;
    margin:0.2rem auto;
    border:1px solid #f4f4f4;
    border-radius: 1rem;
    background-color: green;
    color:white;
    text-align: center;
}
#spcart .shop{
    width:90%;
    margin:2rem auto;
    border:1px solid #f4f4f4;
}
#spcart .title{
    padding:0 0.5rem;
    width:100%;
    height: 2.5rem;
    border-bottom: 1px solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    line-height: 2.5rem;
}
#spcart .title i{
    line-height: 2.5rem;
    font-size: 1.5rem;
    color: #bbb;
}
#spcart .merchant{
    width:100%;
    height: auto;
}
#spcart .merchant ul{
    display: flex;
    flex-wrap: wrap;
}
#spcart .merchant img{
    width:3.5rem;
    height: 3.5rem;
}
#spcart .merchant p{
    font-size: 0.78rem;
    text-align: center;
}
</style>


